To get that classic "Windows Explorer" or "File Tree" look with dashed guide lines and +/- boxes, you'll need to update your CSS to use pseudo-elements (::before and ::after).
The screenshot shows a "junction" style where vertical dashed lines connect siblings and horizontal dashed lines lead to the items.

1. Update your public/style.css

Replace your existing .archive-tree styles with this expanded version. This uses thin borders and absolute positioning to draw the "lines":

CSS

/* Container for the tree */
.archive-tree {
padding-left: 10px;
}

/* Remove default arrows /
.archive-tree summary {
list-style: none;
display: block;
cursor: pointer;
position: relative;
padding-left: 20px;
color: #0056b3; / Blue links like your screenshot */
}
.archive-tree summary::-webkit-details-marker { display: none; }

/* The vertical connector lines */
.archive-tree details {
position: relative;
margin-left: 10px;
border-left: 1px dotted #999;
}

/* The horizontal lines leading to items */
.archive-tree summary::after {
content: "";
position: absolute;
top: 12px;
left: 0;
width: 15px;
border-top: 1px dotted #999;
}

/* The +/- Box Icons */
.archive-tree summary::before {
content: "+";
position: absolute;
left: -5px;
top: 6px;
width: 10px;
height: 10px;
line-height: 8px;
text-align: center;
background: white;
border: 1px solid #999;
font-size: 10px;
color: #666;
z-index: 1;
}

/* Change + to - when open */
.archive-tree details[open] > summary::before {
content: "-";
}

/* Fix for the very last item in a list so the vertical line doesn't hang down */
.archive-tree details:last-child {
border-left: none;
}
.archive-tree details:last-child::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 12px;
border-left: 1px dotted #999;
}

/* Style for actual post links (the "leaves") */
.archive-tree ul {
list-style: none;
margin: 0;
padding-left: 20px;
border-left: 1px dotted #999;
}

.archive-tree li {
position: relative;
padding-left: 15px;
}

.archive-tree li::before {
content: "";
position: absolute;
top: 12px;
left: 0;
width: 10px;
border-top: 1px dotted #999;
}

.archive-tree a {
text-decoration: none;
font-size: 0.95rem;
color: #0056b3;
}

2. Tweak the HTML in layout.njk

Ensure your Tags section doesn't have extra margin-left inline styles, as the CSS above handles the spacing now.
In your renderTag macro, make sure the

    is inside the
    but outside the :

    HTML

    {% macro renderTag(name, data) %}

    {{ name }} {# Child Tags #} {% for childName, childData in data._children %} {{ renderTag(childName, childData) }} {% endfor %}

    {# Posts #}
    {% if data._posts.length > 0 %}


    {% endif %}

    {% endmacro %}

    Why this works:

    1. border-left: 1px dotted: Creates the long vertical lines that visually group sub-items together.
    2. ::before on Summary: Creates the little square box. By setting the background: white, it covers the vertical line behind it so the "+" looks clean.
    3. :last-child logic: This is the "magic" that stops the vertical line at the last item of a folder, just like in your screenshot.

    Would you like me to adjust the colors or spacing to match your screenshot even more precisely?